プルダウンメニューを階層化する
今回は、プルダウンメニューを階層化する方法を解説します。さらに、前回の講座で紹介した「プルダウンメニューでリンク集を作成する」を改良し、リンク集を階層化してみます。カテゴリ別のリンク集を作成する場合などに活用してみてください。 サンプルページ

→ プルダウンメニューを階層化する
 
プルダウンメニューを階層化する場合は、各「OPTION」タグを「OPTGROUP」〜「/OPTGROUP」タグで挟み、各項目をグループ化します。さらに、「OPTGROUP」タグのlabel属性にはグループ名を指定しておきます。以上で、プルダウンメニューの階層化は完了です。これを実際に表示させると、サンプルのようにプルダウンメニューが階層化されているのを確認できます。
<FORM name="form1">
<SELECT name="link">
<OPTION>▼リンク先を選択</OPTION>
<OPTGROUP label="インフォシーク">
<OPTION>トップページ</OPTION>
<OPTION>ニュース</OPTION>
   :
   :
</OPTGROUP>
<OPTGROUP label="楽天市場">
<OPTION>トップページ</OPTION>
<OPTION>楽天フリマ</OPTION>
   :
   :
</OPTGROUP>
</SELECT>
</FORM>
サンプルページ


→ プルダウンメニューにリンク機能を追加する
 
続いては、階層化したプルダウンメニューにリンク機能を追加してみましょう。この手順は、前回の講座で紹介したとおりです。「SELECT」タグにonChangeイベントを追加してJavaScript関数「OpenLink()」を呼び出します。また、リンク先は、各「OPTION」タグのvalue属性に指定しておきます。

<FORM name="form1">
<SELECT name="link" onChange="OpenLink()">
<OPTION>▼リンク先を選択</OPTION>
<OPTGROUP label="インフォシーク">
<OPTION value="http://www.infoseek.co.jp/">トップページ</OPTION>
<OPTION value="http://news.www.infoseek.co.jp/">ニュース</OPTION>
   :
   :
</OPTGROUP>
<OPTGROUP label="楽天市場">
<OPTION value="http://www.rakuten.co.jp/">トップページ</OPTION>
<OPTION value="http://furima.rakuten.co.jp/">楽天フリマ</OPTION>
   :
   :
</OPTGROUP>
</SELECT>
</FORM>

<SCRIPT language="JavaScript">
<!--
function OpenLink(){
var n = document.form1.link.selectedIndex;
if (n != 0){
location.href = document.form1.link.options[n].value;
}
}
//-->
</SCRIPT>

サンプルページ


→ プルダウンメニューをデザインする
 
前々回の講座で紹介したように、スタイルシートを利用してプルダウンメニューをデザイン化することも可能です。もちろん、これはプルダウンメニューを階層化している場合も同様。「OPTGROUP」タグにスタイルシートを指定すると、そのグループに属する全項目に対して背景色(background-color)や文字色(color)を一括指定できます。以下に、文字サイズ、文字色、背景色を変更した例を紹介しておくので参考としてください。
<FORM name="form1">
<SELECT name="link" style="font-size:12pt" onChange="OpenLink()">
<OPTION>▼リンク先を選択</OPTION>
<OPTGROUP label="インフォシーク"
style="background-color:#3366BB; color:#FFFFFF;">
<OPTION value="http://www.infoseek.co.jp/">トップページ</OPTION>
<OPTION value="http://news.www.infoseek.co.jp/">ニュース</OPTION>
   :
   :
</OPTGROUP>
<OPTGROUP label="楽天市場"
style="background-color:#BB0000; color:#FFFFFF;">
<OPTION value="http://www.rakuten.co.jp/">トップページ</OPTION>
<OPTION value="http://furima.rakuten.co.jp/">楽天フリマ</OPTION>
   :
   :
</OPTGROUP>
</SELECT>
</FORM>
サンプルページ


yVoC[UNLIMIT1~] ECir|C Yahoo yV LINEf[^[z500~`I


z[y[W NWbgJ[h COiq O~yz COsI COze